<template>
	<view class="history_single_box">
		<!-- 维修履历 -->
		<view class="user_message" v-if="historyOrderTableData.length > 0">
			<view 
				class="user_message_user utils_patternOne" 
				v-for="(item, index) in historyOrderTableData" 
				:key="index"
				>
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">工单编号：{{ item.orderId }}</text>
						<view class="tips"></view>
					</view>
					<view @tap="handleGoAttachmentpath(item)" class="utils_right_text">
						<text>查看配件</text>
					</view>
				</view>
				
				<!-- 内容 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<!-- <text class="user_content_text">工单编号：{{item.orderId}}</text> -->
						<text class="user_content_text">工单类型：{{item.repairType}}</text>
						<text class="user_content_text">行驶里程：{{item.odo}}</text>
						<text class="user_content_text">开单时间：{{item.createTime}}</text>
						<text class="user_content_text">门店名称：{{item.shopName}}</text>
						<text class="user_content_text">结算时间：{{item.payTime}}</text>
						<text class="user_content_text">应收金额：{{item.amount}}</text>
						<text class="user_content_text">实收金额：{{item.amountReceivable}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="user_message" v-else>
			<view 
				class="user_message_user utils_patternOne" 
				>
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">工单编号：--</text>
						<view class="tips"></view>
					</view>
					<!-- <view @tap="handleGoAttachmentpath(item)" class="utils_right_text">
						<text>查看配件</text>
					</view> -->
				</view>
				
				<!-- 内容 -->
				<view class="user_message_conetnt">
					<view class="user_conetnt_item">
						<!-- <text class="user_content_text">工单编号：--</text> -->
						<text class="user_content_text">工单类型：--</text>
						<text class="user_content_text">行驶里程：--</text>
						<text class="user_content_text">开单时间：--</text>
						<text class="user_content_text">门店名称：--</text>
						<text class="user_content_text">结算时间：--</text>
						<text class="user_content_text">应收金额：--</text>
						<text class="user_content_text">实收金额：--</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js'
	import utils from '@/utils/uitils.js'
	export default {
		data () {
			return {
				historyOrderReqData: {
					vin: "",
					single: 0,
					pageNumber: 1,
					pageSize: 5,
				},
				historyOrderTableData: [], 
			}
		},
		
		onLoad (options) {
			console.log('接收到的参数', options)
			this.historyOrderReqData.vin = options.vin
		},
		
		mounted() {
			this.getCusWildMaintainRecrd()
		},
		
		methods: {
			// 获取全网历史工单
			async getCusWildMaintainRecrd() {
				try {
					const res = await apiRqs.getCusMaintainRecord(this.historyOrderReqData);
					const result = JSON.parse(JSON.stringify(res.data));
					console.log("历史工单arr", res.data);
	
					for (let i = 0; i < result.data.length; i++) {
						result.data[i].odo = utils.textFormat(result.data[i].odo.toFixed(0)) + 'km'
						result.data[i].amount = result.data[i].amount + "元";
						result.data[i].amountReceivable = result.data[i].amountReceivable + "元";
					}
					this.historyOrderTableData = result.data;
					console.log("历史工单resultdata", result.data);
					
					// this.historyOrderTotal = result.totalRecords;
				} catch (err) {
					console.error("历史工单报错", err);
				}
			},
			
			// 打开工单编号
			handleGoAttachmentpath(item) {
				uni.navigateTo({
					url: '/packageE/maintenance-task/subset-page/attachment?orderId=' + item.orderId
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.history_single_box {
		padding: 24rpx;
		background-image: url('../../../static/byd-img/jiaoji@1x.png');
		background-repeat: no-repeat;
		background-position: top center;
		// background-size: contain;
		background-size: 100% auto;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		
		/* 公共样式-内外边距、背景色、边框弧度 */
		.utils_patternOne {
			margin-bottom: 32rpx;
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}
		
		/* 公共样式-区块标题 */
		.utils_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			
			.title_text {
				position: relative;
				// font-size: 32rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #1D2129;
				.title_left_text {
					margin-left: 24rpx;
				}
				.tips {
					position: absolute;
					top: 8rpx;
					left: 0;
					border-radius: 8rpx;
					width: 8rpx;
					height: 24rpx;
					background: #0063FF;
				}
			}
			
			.utils_right_text {
				font-size: 28rpx;
				font-weight: bold;
				color: #0256FF;
			}
			
			.right_text_title {
				font-size: 24rpx;
				color: #86909C;
			}
		}
		
		/* 客户基础信息 */
		.user_message {
			margin-top: 32rpx;
			.user_message_user {
				.user_message_conetnt {
					.user_conetnt_item {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						
						font-family: 思源黑体;
						font-size: 24rpx;
						color: #4E5969;
						
						.user_content_text {
							margin-bottom: 24rpx;
							&:nth-child(odd) {
								margin-right: 10rpx;
								min-width: 400rpx;
							}
							.user_cart_copy {
								margin-left: 20rpx;
								color: #0063FF;
							}
						}
						
						&:last-child {
							margin-bottom: 0;
						}
						
					}
				}
			}
		}
	}
</style>